/**
 * title: 公司主题样式
 * description: 展示基于 DSL 配置的公司主题样式，包括所有按钮类型和状态
 */

import React from 'react';
import { Button, Space, Divider } from '../../../';

const App: React.FC = () => (
  <>
    <Space wrap>
      <Button type="primary">Primary Button</Button>
      <Button>Default Button</Button>
      <Button type="dashed">Dashed Button</Button>
      <Button type="text">Text Button</Button>
      <Button type="link">Link Button</Button>
    </Space>

    <Divider>危险按钮</Divider>
    <Space wrap>
      <Button type="primary" danger>Primary Danger</Button>
      <Button danger>Default Danger</Button>
      <Button type="dashed" danger>Dashed Danger</Button>
      <Button type="text" danger>Text Danger</Button>
      <Button type="link" danger>Link Danger</Button>
    </Space>

    <Divider>禁用状态</Divider>
    <Space wrap>
      <Button type="primary" disabled>Primary Disabled</Button>
      <Button disabled>Default Disabled</Button>
      <Button type="dashed" disabled>Dashed Disabled</Button>
      <Button type="text" disabled>Text Disabled</Button>
      <Button type="link" disabled>Link Disabled</Button>
    </Space>

    <Divider>不同尺寸</Divider>
    <Space wrap>
      <Button type="primary" size="large">Large</Button>
      <Button type="primary">Default</Button>
      <Button type="primary" size="small">Small</Button>
    </Space>

    <Divider>幽灵按钮</Divider>
    <div style={{ padding: '20px', background: '#1890ff' }}>
      <Space wrap>
        <Button ghost>Default Ghost</Button>
        <Button type="primary" ghost>Primary Ghost</Button>
        <Button danger ghost>Danger Ghost</Button>
      </Space>
    </div>
  </>
);

export default App;

